<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title th:text="${titleName}"></title>
    <link rel="stylesheet" href="/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="/adminlte/css/adminlte.min.css">
    <link rel="stylesheet" href="/jqgrid/css/ui.jqgrid.css">
    <link rel="stylesheet" href="/jqgrid/css/ui.jqgrid-bootstrap4.css">
    <link rel="stylesheet" href="/jqgrid/css/ui.jqgrid-bootstrap-ui.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <header th:replace="admin/common/header::header">

    </header>
    <aside th:replace="admin/common/left::left">

    </aside>
    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark" th:text="${titleName}"></h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/index/index">主页</a></li>
                            <li class="breadcrumb-item active" th:text="${titleName}"></li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>

        <section class="content">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">用户列表</h3>
                </div>
                <div class="card-body">
                    <table id="jqGrid"></table>
                    <div id="jqGridPager"></div>
                </div>
            </div>
        </section>
    </div>

    <aside class="control-sidebar control-sidebar-dark">
        <div class="p-3">
            <h5>通知</h5>
            <p>内容</p>
        </div>
    </aside>

    <footer th:replace="admin/common/footer::footer">
    </footer>
</div>
<script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script src="/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/adminlte/js/adminlte.min.js"></script>
<script>
    $(document).ready(function () {
        $("#jqGrid").jqGrid({
            colModel: [
                {
                    label: 'Title',
                    name: 'Title',
                    width: 150,
                    formatter: formatTitle
                },
                {
                    label: 'Link',
                    name: 'Link',
                    width: 80,
                    formatter: formatLink
                },
                {
                    label: 'View Count',
                    name: 'ViewCount',
                    width: 35,
                    sorttype:'integer',
                    formatter: 'number',
                    align: 'right'
                },
                {
                    label: 'Answer Count',
                    name: 'AnswerCount',
                    width: 25
                }
            ],
            viewrecords: true, // show the current page, data rang and total records on the toolbar
            width:window.screen.availWidth-300,
            height: 200,
            rowNum: 15,
            datatype: 'local',
            pager: "#jqGridPager",
            caption: "Load live data from stackoverflow"
        });

        fetchGridData();

        function fetchGridData() {

            var gridArrayData = [];
            // show loading message
            $("#jqGrid")[0].grid.beginReq();
            $.ajax({
                url: "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow",
                success: function (result) {
                    for (var i = 0; i < result.items.length; i++) {
                        var item = result.items[i];
                        gridArrayData.push({
                            Title: item.title,
                            Link: item.link,
                            CreationDate: item.creation_date,
                            ViewCount: item.view_count,
                            AnswerCount: item.answer_count
                        });
                    }
                    // set the new data
                    $("#jqGrid").jqGrid('setGridParam', { data: gridArrayData});
                    // hide the show message
                    $("#jqGrid")[0].grid.endReq();
                    // refresh the grid
                    $("#jqGrid").trigger('reloadGrid');
                }
            });
        }

        function formatTitle(cellValue, options, rowObject) {
            return cellValue.substring(0, 50) + "...";
        };

        function formatLink(cellValue, options, rowObject) {
            return "<a href='" + cellValue + "'>" + cellValue.substring(0, 25) + "..." + "</a>";
        };



    });
</script>
</body>
</html>
